<template>
  <div v-if="!!model" class="operand">
    <div v-if="model.type === 'variable'">
      <q-select
        v-model="model.opValue"
        :options="labelOptions"
        dense
        options-dense
        class="form-select"
        emit-value
        map-options
        outlined
        :rules="[
          (val) => {
            let msg = validateRules['label'].validate(val)
            if (msg && msg.length > 0) {
              return msg
            }
            return null
          }
        ]"
      >
        <template v-slot:no-option>
          <div class="no-option" />
        </template>
      </q-select>
    </div>
    <div v-else>
      <q-input
        class="input-value"
        v-model="model.opValue"
        v-if="showA()"
        dense
        emit-value
        map-options
        outlined
        placeholder="A"
        :rules="[
          (val) => {
            let msg = validateRules['avalue'].validate(val)
            if (msg && msg.length > 0) {
              return msg
            }
            return null
          }
        ]"
      >
      </q-input>
      <q-input
        class="input-value"
        v-model="model.opValue"
        dense
        v-if="showB()"
        emit-value
        map-options
        outlined
        placeholder="B"
        :rules="[
          (val) => {
            let msg = validateRules['bvalue'].validate(val)
            if (msg && msg.length > 0) {
              return msg
            }
            return null
          }
        ]"
      >
      </q-input>
    </div>
  </div>
</template>
<script>
import YzOperand from 'src/boot/common/yzOperand'
export default {
  name: 'yz-operand',
  props: {
    model: {
      type: YzOperand,
      require: true
    },
    op: {
      type: String
    },
    labelOptions: {
      type: Array,
      require: true
    }
  },
  emit: ['dataTypeChange'],
  model: {
    prop: 'model',
    event: 'submit'
  },
  components: {
    // yzOperator
  },
  watch: {
    model: {
      deep: true,
      // model发生变化即向上传递
      handler () {
        this.$emit('submit', this.model)
        if (this.labelOptions && this.model.type === 'variable') {
          let op = this.labelOptions.find(n => n.label === this.model.opValue)
          if (op) {
            this.$emit('dataTypeChange', op.dataType)
            return
          }
        }
        this.$emit('dataTypeChange', 0)
      }
    }
  },
  methods: {
    getDataType () {
      if (this.labelOptions && this.model.type === 'variable') {
        let op = this.labelOptions.find(n => n.label === this.model.opValue)
        if (op) {
          return op.dataType
        }
      }
      return null
    },
    checkNotNull (val) {
      if (val === null || val === undefined || val.toString() === '') {
        return '不能为空'
      }
      return ''
    },
    // 是否显示a输入框
    showA () {
      return ['<', '<=', '==', '!='].includes(this.op)
    },
    // 是否显示B输入框
    showB () {
      return ['>', '>='].includes(this.op)
    }
  },
  created () {
    // this.yzOp = yzOperator
  },
  data () {
    return {
      yzOp: null,
      validateRules: {
        label: {
          validate: (v) => {
            if (this.checkNotNull(v).length > 0) {
              return '请选择参数'
            }
            return ''
          }
        },
        avalue: {
          validate: (avalue) => {
            if (this.showA()) {
              if (this.checkNotNull(avalue).length > 0) {
                return 'A值不能为空'
              }
              if (this.getDataType() !== 9) {
                if (!/^(-?\d+)(\.\d+)?$/g.test(avalue)) {
                  return 'A值只能输入数字'
                }
              }
            }
            return ''
          }
        },
        bvalue: {
          validate: (bvalue) => {
            if (this.showB()) {
              if (this.checkNotNull(bvalue).length > 0) {
                return 'B值不能为空'
              }
              if (this.getDataType() !== 9) {
                if (!/^(-?\d+)(\.\d+)?$/g.test(bvalue)) {
                  return 'B值只能输入数字'
                }
              }
            }
            return ''
          }
        }
      }
    }
  }
}
</script>
<style lang="scss">
.operand {
  // width: 180px;
  .input-value {
    width: 80px;
  }

  .form-select {
    width: 90px;
  }
}
</style>
